<?php
/* =========================================连接数据库================================================= */
include_once 'sql/get_information.php';

/* =========================================获取user的基本信息================================================= */
session_start();
$user_id = $_SESSION['userid'];

$currentUser = get_user($user_id);

/* =========================================获取user的兴趣爱好================================================= */
$tags = get_tags($user_id);

$userTag = "";
for ($i = 0; $i < count($tags); $i++) {
    $userTag .= $tags[$i]['user_tag'] . ";";
}

$tagMaxNumber = 10;

/* =========================================获取用户年龄================================================= */
$userAge = get_age($user_id);
?>

<div data-role="page" data-theme="b" data-id="profile_edit_page">
    <div data-role="header" data-id="header" data-theme="b" data-position="fixed" >
        <h2>Home</h2>
<!--        <a data-role="button" data-icon="back" href="index.php?page=2" data-ajax="false">返回</a>-->
        <a data-role="button" data-icon="back" data-rel="back" href="">返回</a>

        <a id="edit_confirm" data-role="button" data-icon="forward" class="ui-btn-right">确定</a>
        <!--submit函数好像有点冲突，这里用post函数，为了方便测试先写在这里，整理时再放到js文件里-->
        <script>
            $(document).ready(function(){
                $('#edit_confirm').bind("vclick",function(){
                    $.post("profile_update.php", $('form#profile').serialize(), function(data){
                        displayMessage('用户信息更新成功');
                        window.location = "index.php?page=2";
                    });
                });
            });
        </script>
    </div>

    <div data-role="content" class="l-inset-content">
        <form id="profile">
            <ul class="l-detail l-edit l-inset" data-role="listview" data-inset="true" >
                <li class="l-li-photo">
                    <div class="l-photo l-shadowbox" style="background-image: url(<?php echo small_to_large($currentUser['image']); ?>)">          

                    </div>
                    <div>
                        <a data-role="button" href="photo_upload.php"data-inline="true" class="l-button">上传图片</a>
                        <a data-role="button" href=""data-inline="true" class="l-button">刷新图片</a>
                    </div>
                </li>
                <li>
                    <label>昵称：</label>
                    <input type="text" name="nick_name" id="nick_name" value="<?php echo $currentUser['nick_name']; ?>"/>
                </li>
                <li>
                    <label>位置：</label>
                    <input type="hidden" name="longitude" id="longitude" value="<?php echo $currentUser['longitude']; ?>"/>
                    <input type="hidden" name="latitude" id="latitude" value="<?php echo $currentUser['latitude']; ?>"/>
                    <input type="text" name="address" id="address" class="l-position" value="<?php echo $currentUser['address']; ?>"/>

                    <div>
                        <a data-role="button" href=""data-inline="true" class="l-button" id="reGetPosition">重新获取</a>
                        <script>
                            //整理时再整合起来
                            $(document).ready(function(){
                                $('#reGetPosition').click(function(){
                                    if (navigator.geolocation) {
                                        navigator.geolocation.getCurrentPosition(
                                        function(position) { 
                                            var lat = position.coords.latitude; //纬度
                                            var lon = position.coords.longitude;  //经度 
                                            $.post('address_update.php', {
                                                longitude:lon,
                                                latitude:lat
                                            },function(data){
                                                $('#address').val(data);
                                            })
                                            //to do:把经纬度POST过去，取得返回值更新地理位置
                                            alert('address update seccess')
                                        }
                                    );
                                    } else {
                                        alert('Your browser does not support geolocation.');
                                    }
                                });
                            });
                        </script>
                    </div>
                </li>

                <li>
                    <label>爱好：</label>
                    <fieldset class="l-taglist">
                        <?php
                        $i = 0;
                        $count = count($tags);
                        for (; $i < $count; $i++) {
                            ?>
                            <input type="search" name="tag<?php echo $i; ?>" data-tag-id="<?php echo $i; ?>" value="<?php echo trim($tags[$i]['user_tag']); ?>"/>
                            <?php
                        }
                        ?>
                        <?php
                        for (; $i < $tagMaxNumber; $i++) {
                            ?>
                            <input type="search" name="tag<?php echo $i; ?>" data-tag-id="<?php echo $i ?>" value="" hidden/>
                            <?php
                        }
                        ?>
                        <input id="new_tag" type="search" data-tag-count="<?php echo $count; ?>" data-tag-max-number="<?php echo $tagMaxNumber; ?>" value="new_tag"/>
                    </fieldset>

                </li>
                <li>
                    <label>性别：</label>
                    <fieldset data-role="controlgroup" data-type="horizontal" class="l-button">
                        <input type="radio" name="gender" id="radio-choice-1" value="男" checked="checked" />
                        <label for="radio-choice-1">男</label>

                        <input type="radio" name="gender" id="radio-choice-2" value="女"/>
                        <label for="radio-choice-2">女</label>
                    </fieldset>
                </li>
                <li>
                    <!--                    <label>年龄：</label>
                                        <input class="l-number" type="number" name="age" id="" value="<?php echo $userAge; ?>" min="18" max="100"  />
                                        <label>岁</label>
                    
                                        <label class="l-warning l-hidden">年龄范围为18～100岁</label>-->
                    <label>生日：</label>
                    <select name="birth-year" id="birth-year" data-inline="true" class="l-select l-birth">
                        <option class="l-first-child" value="0">年</option>
                        <option value="2011" label="2011">2011</option>
                        <option value="2010" label="2010">2010</option>
                        <option value="2009" label="2009">2009</option>
                        <option value="2008" label="2008">2008</option>
                        <option value="2007" label="2007">2007</option>
                        <option value="2006" label="2006">2006</option>
                        <option value="2005" label="2005">2005</option>
                        <option value="2004" label="2004">2004</option>
                        <option value="2003" label="2003">2003</option>
                        <option value="2002" label="2002">2002</option>
                        <option value="2001" label="2001">2001</option>
                        <option value="2000" label="2000">2000</option>
                        <option value="1999" label="1999">1999</option>
                        <option value="1998" label="1998">1998</option>
                        <option value="1997" label="1997">1997</option>
                        <option value="1996" label="1996">1996</option>
                        <option value="1995" label="1995">1995</option>
                        <option value="1994" label="1994">1994</option>
                        <option value="1993" label="1993">1993</option>
                        <option value="1992" label="1992">1992</option>
                        <option value="1991" label="1991">1991</option>
                        <option value="1990" label="1990">1990</option>
                        <option value="1989" label="1989">1989</option>
                        <option value="1988" label="1988">1988</option>
                        <option value="1987" label="1987">1987</option>
                        <option value="1986" label="1986">1986</option>
                        <option value="1985" label="1985">1985</option>
                        <option value="1984" label="1984">1984</option>
                        <option value="1983" label="1983">1983</option>
                        <option value="1982" label="1982">1982</option>
                        <option value="1981" label="1981">1981</option>
                        <option value="1980" label="1980">1980</option>
                        <option value="1979" label="1979">1979</option>
                        <option value="1978" label="1978">1978</option>
                        <option value="1977" label="1977">1977</option>
                        <option value="1976" label="1976">1976</option>
                        <option value="1975" label="1975">1975</option>
                        <option value="1974" label="1974">1974</option>
                        <option value="1973" label="1973">1973</option>
                        <option value="1972" label="1972">1972</option>
                        <option value="1971" label="1971">1971</option>
                        <option value="1970" label="1970">1970</option>
                        <option value="1969" label="1969">1969</option>
                        <option value="1968" label="1968">1968</option>
                        <option value="1967" label="1967">1967</option>
                        <option value="1966" label="1966">1966</option>
                        <option value="1965" label="1965">1965</option>
                        <option value="1964" label="1964">1964</option>
                        <option value="1963" label="1963">1963</option>
                        <option value="1962" label="1962">1962</option>
                        <option value="1961" label="1961">1961</option>
                        <option value="1960" label="1960">1960</option>
                        <option value="1959" label="1959">1959</option>
                        <option value="1958" label="1958">1958</option>
                        <option value="1957" label="1957">1957</option>
                        <option value="1956" label="1956">1956</option>
                        <option value="1955" label="1955">1955</option>
                        <option value="1954" label="1954">1954</option>
                        <option value="1953" label="1953">1953</option>
                        <option value="1952" label="1952">1952</option>
                        <option value="1951" label="1951">1951</option>
                        <option value="1950" label="1950">1950</option>
                        <option value="1949" label="1949">1949</option>
                        <option value="1948" label="1948">1948</option>
                        <option value="1947" label="1947">1947</option>
                        <option value="1946" label="1946">1946</option>
                        <option value="1945" label="1945">1945</option>
                        <option value="1944" label="1944">1944</option>
                        <option value="1943" label="1943">1943</option>
                        <option value="1942" label="1942">1942</option>
                        <option value="1941" label="1941">1941</option>
                        <option value="1940" label="1940">1940</option>
                        <option value="1939" label="1939">1939</option>
                        <option value="1938" label="1938">1938</option>
                        <option value="1937" label="1937">1937</option>
                        <option value="1936" label="1936">1936</option>
                        <option value="1935" label="1935">1935</option>
                        <option value="1934" label="1934">1934</option>
                        <option value="1933" label="1933">1933</option>
                        <option value="1932" label="1932">1932</option>
                        <option value="1931" label="1931">1931</option>
                        <option value="1930" label="1930">1930</option>
                        <option value="1929" label="1929">1929</option>
                        <option value="1928" label="1928">1928</option>
                        <option value="1927" label="1927">1927</option>
                        <option value="1926" label="1926">1926</option>
                        <option value="1925" label="1925">1925</option>
                        <option value="1924" label="1924">1924</option>
                        <option value="1923" label="1923">1923</option>
                        <option value="1922" label="1922">1922</option>
                        <option value="1921" label="1921">1921</option>
                        <option value="1920" label="1920">1920</option>
                        <option value="1919" label="1919">1919</option>
                        <option value="1918" label="1918">1918</option>
                        <option value="1917" label="1917">1917</option>
                        <option value="1916" label="1916">1916</option>
                        <option value="1915" label="1915">1915</option>
                        <option value="1914" label="1914">1914</option>
                        <option value="1913" label="1913">1913</option>
                        <option value="1912" label="1912">1912</option>
                        <option value="1911" label="1911">1911</option>
                        <option value="1910" label="1910">1910</option>
                        <option value="1909" label="1909">1909</option>
                        <option value="1908" label="1908">1908</option>
                        <option value="1907" label="1907">1907</option>
                        <option value="1906" label="1906">1906</option>
                        <option value="1905" label="1905">1905</option>
                        <option value="1904" label="1904">1904</option>
                        <option value="1903" label="1903">1903</option>
                        <option value="1902" label="1902">1902</option>
                        <option value="1901" label="1901">1901</option>
                        <option value="1900" label="1900">1900</option>
                    </select>

                    <select name="birth-month" id="birth-month" data-inline="true" class="l-select l-birth">
                        <option class="l-first-child" value="0">月</option>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>

                    <select name="birth-day" id="birth-day" data-inline="true" class="l-select l-birth">
                        <option class="l-first-child" value="0">日</option>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>

                    <script type="text/javascript">
                        $(document).ready(function (){
                            $('select.l-birth').focus(function () {
                                //alert('ready to delete');
                                $(this).children('option.l-first-child').remove();
                            });
                        });
                    </script>
                </li>
                <li>
                    <label>身高：</label>
                    <input class="l-number" type="number" name="height" id="" value="<?php echo $currentUser['height']; ?>" min="100" max="250" />
                    <label>厘米</label>
                    <label class="l-warning l-hidden">身高范围为100～250厘米</label>
                </li>
                <li>
                    <label>简介：</label>
                    <textarea cols="40" rows="8" name="introduction" id="textarea" ><?php echo $currentUser['introduction']; ?></textarea>
                </li> 
            </ul>
        </form>
    </div>

    <div data-role="footer" data-theme="b" data-id="footer">
        <h2 >Team Luff</h2>
    </div>

</div>
<!--    </body>
</html>-->
